// 定义路由表
// 引入组件
// 注意: 使用es6模块化语法引入组件,组件一定会在项目开启的时候加载所有组件
// import Home from '../pages/Home'
// import About from '../pages/About'
// import News from '../pages/News'
// import Message from '../pages/Message'
// import Detail from '../pages/Detail'

// React里面提供了懒加载组件的方法(什么时候要new这个组件了,组件才会加载到内存中)
import React, { Suspense } from 'react'
const Home = React.lazy(() => {
  return import('../pages/Home')
})
const About = React.lazy(() => {
  return import('../pages/About')
})
const News = React.lazy(() => import('../pages/News'))
const Message = React.lazy(() => import('../pages/Message'))
const Detail = React.lazy(() => import('../pages/Detail'))

// 定义一个函数,给每一个懒加载的组件包裹Suspense
function load(Son) {
  return (
    <Suspense
      fallback={<div style={{ color: 'red', fontSize: 40 }}>loading...</div>}
    >
      <Son></Son>
    </Suspense>
  )
}
export default [
  {
    path: 'home',
    element: load(Home),
    children: [
      {
        path: 'news',
        element: load(News),
      },
      {
        path: 'message',
        element: load(Message),
        children: [
          {
            path: 'detail/:id?',
            element: load(Detail),
          },
        ],
      },
    ],
  },
  {
    path: 'about',
    element: load(About),
  },
]
